<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机彩色盒子</title>
    <style>
        /* 盒子 宽高 */
        div {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
<p>
    生成随机颜色
    需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。 <br>
    ①：如果参数传递的是true或者无参数，则输出 一个随机十六进制的颜色 <br>
    ②：如果参数传递的是false，则输出 一个随机rgb的颜色 <br>
    ③：格式： <br>
    function getRandomColor(flag){ <br>
    } <br>
    console.log(getRandomColor(true)) //#ffffff <br>
    console.log(getRandomColor(false)) //rgb(255,255,255)
    分析： <br>
    提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符 <br>
    提示: rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字
</p>
<hr>


<script>
    // 随机盒子颜色

    function 获取随机颜色(布尔值 = true) { // 设置默认参数
        // 判断 传入的布尔值, 如果是true 则返回 #ffffff 格式
        if (布尔值 === true) {
            let 格式16进制颜色 = '#'
            let 数组_0到f之间的字符 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
            for (let i = 0; i < 6; i++) { // 随机生成6个符号
                // 拼接字符串,    随机读取数组的一个元素值
                格式16进制颜色 += Math.floor(Math.random() * 数组_0到f之间的字符.length)
            }
            return 格式16进制颜色 // 字符串内容  #xxxxxx
        }

        // 判断 传入的布尔值, 如果是false 则返回 rgb(255,255,255) 格式
        if (布尔值 === false) {
            let rgb颜色格式_第一位数 = Math.floor(Math.random() * (255 + 1))
            let rgb颜色格式_第二位数 = Math.floor(Math.random() * (255 + 1))
            let rgb颜色格式_第三位数 = Math.floor(Math.random() * (255 + 1))
            return `rgb(${rgb颜色格式_第一位数},${rgb颜色格式_第二位数},${rgb颜色格式_第三位数}`
            // 字符串内容  rgb(xxx,xxx,xxx)
        }
    }

    // 调用函数
    document.write(`<div style="background-color: ${获取随机颜色(true)}"></div>`) //页面打印盒子, 并且读取函数返回的 颜色
    document.write(`<div style="background-color: ${获取随机颜色(false)})"></div>`)

</script>


</body>
</html>